<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // html元素.currentStyle.样式属性
        // getComputedStyle(元素，null)

    </script>
    <style>
        #main {
            text-align: center;
            width: 1014px;
            margin: 0 auto;
        }

        /* #main img {
            padding-top: -300px;
            padding-left: 100px;
            margin-top: -20px;
        } */

        #adv {
            position: absolute;
            left: 10px;
            top: 30px;
            z-index: 2;
        }
    </style>
</head>

<body>
    <!-- <div id="a1" style="display: none;">11111111</div>
    <script>
        let a = document.getElementById("a1");
        let b=document.defaultView.getComputedStyle(a,null).display;
        console.log(b);
        
    </script> -->

    <div id="adv" style="top: 200px;left: 10px;"><img src="./img/adv.jpg" alt=""></div>
    <div id="main">
        <img src="./img/main1.JPG" alt="">
        <img src="./img/main2.JPG" alt="">
        <img src="./img/main3.JPG" alt="">

    </div>

    <script>
        // function inix() {
        //     adverObj = document.getElementById("adv"); //获得层对象
        //     if (adverObj.currentStyle) {
        //         adverTop = parseInt(adverObj.currentStyle.top);
        //         adverLeft = parseInt(adverObj.currentStyle.left);
        //     }
        //     else {

        //     }
        // }
        // function move() {
        //     var sTop = parseInt(document.documentElement.scrollTop || document.body.scrollTop);
        //     var sLeft = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);
        //     adverObj.style.top = adverTop + sTop + "px";
        //     adverObj.style.left = adverLeft + sLeft + "px";
        // }
        // window.onload = inix;
        // window.onscroll = move;

        let adverObj;
        let adverTop;
        let adverLeft;
        function inix() {
            adverObj = document.getElementById("adv");//层对象
            adverTop = parseInt(document.defaultView.getComputedStyle(adverObj, null).top);
            adverLeft = parseInt(document.defaultView.getComputedStyle(adverObj, null).left);

            // adverTop = document.defaultView.getComputedStyle(adverObj, null).top;///和页面顶端的距离
            // adverLeft = document.defaultView.getComputedStyle(adverObj, null).left;//和页面左边的距离

            console.log(adverLeft);
            console.log(adverTop);
        }
        function move() {
            // 相对于滚动的位置
            let stop = document.documentElement.scrollTop;
            let sleft = document.documentElement.scrollLeft;
            console.log(sleft);
            console.log(stop);

            adverObj.style.top = adverTop + stop + "px";
            adverObj.style.left = adverLeft + sleft + "px";
        }

        // 页面初始化时
        window.onload = inix;
        window.onscroll = move;
    </script>
</body>

</html>